<template>
  <div class="home">
    <!-- 头部 -->
    <div class="van-seach">
      <van-search
        style="seach"
        disabled
        placeholder="批准文号、通用名、商品名、症状"
        show-action
        @click="$router.push({path:'/search'})"
        shape="round"
        background="linear-gradient(
        90deg,
        #5ee3ff 0,
        #47deb3 38%,
        #2fd866 100%
      ),
      linear-gradient(#fff, #fff)"
      >
        <van-icon
          name="user-circle-o"
          slot="action"
          @click="$router.push({path:'/personal'})"
          v-if="checkLogin()"
        />
        <div slot="action" @click="$router.push({path:'/login'})" v-else>登录</div>
      </van-search>
      <div class="search-div"></div>
    </div>
    <div class="main">
      <!-- 轮播 -->
      <banner :bannerList="bannerList"></banner>
      <!-- 宫格导航 -->
      <grid :grids="grids"></grid>
      <!-- 公告轮播 -->
      <notice :notices="notices"></notice>
      <!-- 商城频道 -->
      <malltype></malltype>
      <!-- 健康swiper -->
      <healthy :healthyList="healthyList"></healthy>
      <!-- 快速找药nav -->
      <fast :fastNav="fastNav"></fast>
      <!-- 商品tabs -->
      <tabs></tabs>
      <!-- 主页底部 -->
      <common-linkfloor></common-linkfloor>
    </div>

    <!-- 底部 tabbar-->
    <van-tabbar class="tabbar" v-model="active" active-color="#07c160" inactive-color="#000">
      <van-tabbar-item to="/">
        <img src="@/assets/img/bottom_home_selected.png" alt />
        <p>首页</p>
      </van-tabbar-item>
      <van-tabbar-item to="/cate">
        <img src="@/assets/img/bottom_seek.png" alt />
        <p>分类</p>
      </van-tabbar-item>
      <van-tabbar-item to="/cart" :info="carts.lists.length">
        <img src="@/assets/img/bottom_cart2.png" alt />
        <p>购物车</p>
      </van-tabbar-item>
      <van-tabbar-item to="/personal">
        <img src="@/assets/img/bottom_user.png" alt />
        <p>我的</p>
      </van-tabbar-item>
    </van-tabbar>
    <common-scolltop></common-scolltop>
  </div>
</template>

<script>
import banner from "./components/banner";
import grid from "./components/grid";
import notice from "./components/notice";
import malltype from "./components/malltype";
import healthy from "./components/healthy";
import qs from "qs";
import fast from "./components/fast";
import tabs from "./components/tabs";
import CommonLinkfloor from "components/CommonLinkfloor";
import { mapState, mapActions, mapMutations } from "vuex";
import CommonScolltop from "components/CommonScolltop";
import { checkLogin } from "utils";

export default {
  data() {
    return {
      active: 0,
      bannerList: [],
      grids: [],
      notices: [],
      healthyList: [],
      fastNav: []
    };
  },
  created() {
    this.fetchBanner();
    this.fetchNotice();
    this.fecthHealthy();
    this.fecthFast();
    this.fetchtopNav();
  },
  methods: {
    checkLogin,
    fetchBanner() {
      // 获取banner数据
      this.$http.get("banner/list").then(res => {
        if (res.data.code == 0) {
          this.bannerList = res.data.data;
        }
      });
    },
    fetchtopNav() {
      // 获取banner下nav分类
      this.$http.get("shop/goods/category/all").then(res => {
        this.grids = res.data.data.filter(el => el.pid == 73300);
      });
    },
    fetchNotice() {
      //获取notcie下公告
      this.$http.post("notice/list").then(res => {
        if (res.data.code == 0) {
          this.notices = res.data.data.dataList;
        }
      });
    },
    fecthHealthy() {
      // 获取healthy的商品数据
      this.$http
        .post(
          "shop/goods/list",
          qs.stringify({
            categoryId: 73298
          })
        )
        .then(res => {
          if (res.data.code == 0) {
            this.healthyList = res.data.data;
          }
        });
    },
    fecthFast() {
      // 获取快速找药fast的商品数据
      this.$http.get("shop/goods/category/all").then(res => {
        this.fastNav = res.data.data.filter(el => el.pid == 73355);
      });
    }
  },
  components: {
    banner,
    grid,
    notice,
    malltype,
    healthy,
    fast,
    tabs,
    CommonLinkfloor,
    CommonScolltop
  },
  computed: {
    ...mapState(["carts"])
  }
};
</script>

<style lang="less" scoped>
.home {
  .main {
    padding-top: 60px;
    padding-bottom: 62px;
  }
  .tabbar {
    background-color: #fff;
    padding: 6px 0;
    text-align: center;
    img {
      width: 30px;
      height: 30px;
    }
    p {
      margin: 0;
    }
  }
  .van-tabbar--fixed {
    -webkit-transform: translateZ(0);
  }
  .van-seach {
    position: relative;
    .van-search {
      height: 60px;
      padding-left: 24px;
      z-index: 10;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      .van-search__content {
        padding-left: 16px;
        .van-icon-search {
          font-size: 20px;
          color: #ccc;
        }
      }
    }
    .search-box {
      position: absolute;
    }
  }
  .van-tabbar-item {
    /deep/.van-tabbar-item__icon {
      position: relative;
      right: -14px !important;
      bottom: -8px !important;
    }
  }
}
/deep/.van-search__action {
  text-align: center;
  width: 46px;
  color: #fff;
}
.van-icon-user-circle-o {
  font-size: 35px;
  line-height: 60px;
}
</style>